/**
 * 新增 / 编辑收费计划
 */

<template>
  <div class="addcharge">
    <div class="top">
      <el-card class="box-card">
        <el-form
          :inline="true"
          :model="form"
          class="demo-form-inline"
          label-position="right"
        >
          <el-form-item label="收费名称：">
            <el-input
              v-model="form.chargeName"
              placeholder="收费名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="应用学年：">
            <div class="block">
              <el-date-picker
                v-model="form.yearStartTime"
                align="right"
                type="date"
                placeholder="开始时间"
              >
              </el-date-picker>
              <span style="padding: 0 8px">-</span>
              <el-date-picker
                v-model="form.yearEndTime"
                align="right"
                type="date"
                placeholder="结束时间"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="缴费时间：">
            <div class="block">
              <el-date-picker
                v-model="form.paymentStartTime"
                align="right"
                type="date"
                placeholder="开始时间"
              >
              </el-date-picker>
              <span style="padding: 0 8px">-</span>
              <el-date-picker
                v-model="form.paymentEndTime"
                align="right"
                type="date"
                placeholder="结束时间"
              >
              </el-date-picker>
            </div>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div class="center">
      <el-card class="box-card">
        <h4 style="color: #5995d7; margin-bottom: 15px">应用对象</h4>
        <el-form
          :inline="true"
          :model="form"
          class="demo-form-inline"
          label-position="right"
        >
          <el-form-item label="学院：" prop="colleageCode">
            <el-select
              class="select-wrap"
              v-model="form.collegeName"
              placeholder="学院"
              clearable
              @clear="infoHandleClear"
              ref="infoSelectUpResId"
            >
              <!-- // 设置一个隐藏的下拉选项
              // 如果不设置一个下拉选项，下面的树形组件将无法正常使用 -->
              <el-option label="全部学院" value="全部学院"></el-option>
              <el-option label="未选择" value=" "></el-option>
              <el-option
                hidden
                :value="form.collegeName"
                :label="form.collegeName"
              >
              </el-option>
              <!-- // 设置树形组件
                是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
                // 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。
                  // 节点被点击时的回调 -->
              <el-tree
                :data="editSeletOptions"
                :props="defaultProps"
                :expand-on-click-node="false"
                :check-on-click-node="true"
                @node-click="infoHandleNodeClick"
              >
              </el-tree>
            </el-select>
          </el-form-item>

          <el-form-item label="专业：">
            <el-select
              v-model="form.majorName"
              placeholder="专业"
              style="width: 180px"
              @change="selectMajor"
            >
              <el-option label="全部专业" value="全部专业"></el-option>
              <el-option label="未选择" value=" "></el-option>
              <el-option
                v-for="(item, index) in majorList"
                :key="index"
                :label="item.majorName"
                :value="{ value: item.majorId, label: item.majorName }"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年级：">
            <el-select
              v-model="form.gradeName"
              placeholder="年级"
              style="width: 180px"
            >
              <el-option label="全部年级" value="全部年级"></el-option>
              <el-option label="未选择" value=" "></el-option>
              <el-option
                v-for="item in gradeOptions"
                :key="item.typeId"
                :label="item.typeName"
                :value="item.typeName"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班级：">
            <el-select
              v-model="form.className"
              placeholder="班级"
              style="width: 180px"
            >
              <el-option label="全部班级" value="全部班级"></el-option>
              <el-option label="未选择" value=" "></el-option>
              <el-option
                v-for="item in classListData"
                :key="item.classId"
                :label="item.className"
                :value="item.className"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学生：">
            <el-select
              v-model="form.studentName"
              placeholder="学生"
              style="width: 180px"
            >
              <el-option label="全部学生" value="全部学生"></el-option>
              <el-option label="未选择" value=" "></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <div class="bottom">
      <div class="bottomBox">
        <div class="box-container">
          <h4 style="color: #5995d7">收费项目</h4>
          <el-button size="small" type="primary" class="addBtn" @click="add"
            >添加收费项目</el-button
          >
        </div>
        <el-form
          :model="form"
          class="demo-form-inline"
          label-width="80px"
          label-position="right"
        >
          <el-form-item>
            <el-table :data="form.chargeProject" style="width: 100%">
              <el-table-column prop="date" label="收费项目" width="200">
                <template slot-scope="scope">
                  <el-input
                    type="text"
                    v-model="scope.row.chargeItem"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="收费金额(元)" width="200">
                <template slot-scope="scope">
                  <el-input
                    type="text"
                    v-model="scope.row.money"
                    @input="compute"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="name" width="80">
                <template slot-scope="scope">
                  <span
                    class="icon iconfont icon-tubiaochengjiao-45"
                    @click="handleDel(scope.row.id)"
                  ></span>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item label="收费小计：" style="margin: 0 0 20px 74px">
            <el-input
              style="width: 200px"
              disabled
              v-model="form.amount"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="handleConfirm">确定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { _debounce } from "@/utils/debounce";
import {
  getDetailApi,
  addChargeplanApi,
  editChargeplanApi,
} from "@/api/finance/chargeplan";

import {
  colleageTreeDataApi,
  getClassGradeListApi,
} from "@/api/basics/teachingPlan";
import { getClassifyListApi } from "@/api/basics/classify";
import { getMajorListApi } from "@/api/educational/studentStatus";
export default {
  data() {
    return {
      form: {
        id: "",
        chargeName: "",
        application: "",
        chargeProject: [{ chargeItem: "", money: "", id: 0 }],
        amount: 0,
        yearStartTime: "",
        yearEndTime: "",
        paymentStartTime: "",
        paymentEndTime: "",
        collegeName: "",
        majorName: "",
        gradeName: "",
        className: "",
        studentName: "",
      },
      defaultProps: {
        children: "children",
        label: "label",
      },
      majorList: [], // 专业列表
      classListData: [], // 班级列表
      editSeletOptions: [], // 学院列表
      gradeOptions: [], // 年级列表
    };
  },

  created() {
    // 获取学院列表
    this.editSelectTreeData();

    // 获取专业列表
    this.getMajorList();

    // 获取班级列表
    this.getClassGradeList();

    // 获取年级列表
    this.getGradeList({
      parentId: 55,
    });
  },

  mounted() {
    let { id } = this.$route.query;
    if (id) {
      this.getDetail(id);
    } else {
      this.form = {
        id: "",
        chargeName: "",
        application: "",
        chargeProject: [{ chargeItem: "", money: "", id: 0 }],
        amount: 0,
        yearStartTime: "",
        yearEndTime: "",
        paymentStartTime: "",
        paymentEndTime: "",
        collegeName: "",
        majorName: "",
        gradeName: "",
        className: "",
        studentName: "",
      };
    }
  },

  methods: {
    // 根据id 查询详情数据
    getDetail(id) {
      getDetailApi({ id }).then((res) => {
        if (res.code === 200) {
          this.form = {
            ...res.data,
            chargeProject: res.data.chargeProject
              ? JSON.parse(res.data.chargeProject)
              : [],
          };
        }
      });
    },

    // 添加收费项目
    add() {
      this.form.chargeProject.push({
        chargeItem: "",
        money: "",
        id: this.form.chargeProject.length,
      });
    },

    // 计算总价
    compute() {
      let sum = 0;
      this.form.chargeProject.forEach((item) => {
        sum += Number(item.money);
      });
      this.form.amount = sum;
    },

    // 删除收费项目
    handleDel(id) {
      this.form.chargeProject.forEach((item, index) => {
        if (item.id === id) {
          this.form.chargeProject.splice(index, 1);
        }
      });
      this.form.amount = 0;
      this.compute();
    },

    // 取消
    handleClose() {
      this.$router.go(-1);
    },

    // 确定
    handleConfirm: _debounce(function () {
      this.form.yearStartTime = moment(this.form.yearStartTime).format("YYYY");
      this.form.yearEndTime = moment(this.form.yearEndTime).format("YYYY");
      this.form.paymentStartTime = moment(this.form.paymentStartTime).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      this.form.paymentEndTime = moment(this.form.paymentEndTime).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      if (this.form.id) {
        this.$message("修改中~");
        editChargeplanApi(this.form).then((res) => {
          if (res.code === 200) {
            this.$message.success("修改成功！");
            this.$router.go(-1);
          } else {
            this.$message.error("修改失败！");
          }
        });
      } else {
        this.$message("添加中~");
        addChargeplanApi(this.form).then((res) => {
          if (res.code === 200) {
            this.$message.success("添加成功！");
            this.$router.go(-1);
          } else {
            this.$message.error("添加失败！");
          }
        });
      }
    }, 200),

    // 将选择器的值置空
    infoHandleClear() {
      this.form.collegeName = "";
    },

    // 弹框下拉树
    infoHandleNodeClick(data) {
      console.log(data);
      // // 这里主要配置树形组件点击节点后，设置选择器的值；自己配置的数据，仅供参考
      this.form.collegeName = data.label;
      this.getMajorList(data.label);
      // // 选择器执行完成后，使其失去焦点隐藏下拉框的效果
      this.$refs.infoSelectUpResId.blur();
    },

    // 获取所属专业列表
    async getMajorList(id) {
      if (id) {
        let res = await getMajorListApi({ colleageName: id });
        if (res.code === 200) {
          this.majorList = res.data.filter((item) => {
            return item.status == "0";
          });
        }
      } else {
        let res = await getMajorListApi();
        if (res.code === 200) {
          this.majorList = res.data.filter((item) => {
            return item.status == "0";
          });
        }
      }
    },

    // 获取学院下拉框
    async editSelectTreeData() {
      const res = await colleageTreeDataApi();
      if (res.code === 200) {
        this.editSeletOptions = res.data;
      }
    },

    // 选择专业 获取班级
    selectMajor(data) {
      this.form.majorName = data.label;
      this.getClassGradeList(data.value);
    },

    // 获取班级列表
    async getClassGradeList(id) {
      if (id) {
        await getClassGradeListApi({ majorId: id }).then((res) => {
          this.classListData = res.rows;
        });
      } else {
        await getClassGradeListApi({ pageSize: 20 }).then((res) => {
          this.classListData = res.rows;
        });
      }
    },

    // 获取年级列表
    async getGradeList(data) {
      const res = await getClassifyListApi(data);
      this.gradeOptions = res.rows;
    },
  },
};
</script>
<style lang="scss" scoped>
.addcharge {
  width: 100%;
  height: 100%;
  padding: 0 15px 15px;
  display: flex;
  flex-direction: column;

  ::v-deep .el-form-item__label {
    padding: 0;
  }

  ::v-deep .el-form--inline .el-form-item {
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 10px;
    vertical-align: top;
  }
  .block {
    ::v-deep .el-date-editor.el-input {
      width: 160px;
    }
  }

  .center {
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .bottom {
    flex: 1;
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
    .bottomBox {
      width: 100%;
      min-width: 100vh;
      .box-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 15px;
        padding-right: 10px;

        .addBtn {
          margin-left: 390px;
        }
      }
      .el-table::before {
        height: 0;
      }
    }
  }
}
</style>
